import { ShapeFlags } from "../shared/ShapeFlags"

export const Fragement = Symbol('Fragment');
export const Text = Symbol('Text');

export { createVNode as createElementVNode }
export function createVNode(type, props?, children?) {
    const vnode = {
        // examples：div、p、span...
        type,

        // examples: { id: 1, class: 'test' }
        props,

        // examples: ( childrens )[h('p', { id: 1 }), h('p', { id: 2 })]
        children,

        component: null,

        key: props?.key,

        shapeFlag: getShapeFlag(type),

        // el = 总的实例
        el: null
    }

    if (typeof children === 'string') {
        vnode.shapeFlag = vnode.shapeFlag | ShapeFlags.TEXT_CHILDREN
    } else if (Array.isArray(children)) {
        vnode.shapeFlag = vnode.shapeFlag | ShapeFlags.ARRAY_CHILDREN
    }

    if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
        if (typeof children === "object") {
            vnode.shapeFlag |= ShapeFlags.SLOT_CHILDREN
        }
    }

    return vnode;
}

export function createTextVNode(text) {
    return createVNode(Text, {}, text)
}

function getShapeFlag(type) {
    return typeof type === 'string' ? ShapeFlags.ELEMENT : ShapeFlags.STATEFUL_COMPONENT
}